<template>
    <div class="box">
        <div class="box-1">用户管理</div>
        <div class="box-3">
            <ul>
                <li v-for="(item,index) in list2" :key="index">{{ item }} </li>
            </ul>
                    <!-- @current-change="handleCurrentChange"
                    @size-chchange="handleCurrentChange" -->
            <div class="block">
                <el-pagination
                    background
                    layout="prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :current-page.sync="currpage"  
                    :page-size="pageSize"
                    :total="this.list.length"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
// import { UserList } from "@/request/http";
// import { List } from "@/request/http";
import { formatDate } from '@/common/filters'
   export default {
        name:'UserList',
        data() {
            return {
                list: ["aaa","bbb","ccc","ddd","eee","nnn","fff","ggg","ccc","ddd","ccc","eee","aaa","bbb","ddd",
                    "eee","aaa","bbb","ccc","ddd","eee","nnn","fff","ggg","ddd","eee","aaa","bbb","ccc","ddd",
                    "eee","aaa","bbb","ccc","ddd","ddd","eee","nnn","fff","ggg","eee","aaa","bbb","ccc","ddd",
                    "bbb","eee","aaa","ccc","ddd","eee"],
                list2:[],         //数组用来存放临时数据---当前页的数据存放
                pageSize:5,      //每一页的数据
                currpage:1,       //当前页的页码
                total:0           //所有的数据
            };
        },
        
        beforeMount(){
            this.getData()
        },
        watch : {
            //监听页码
            currpage(newpage,oldpage){
                console.log(newpage)   //点击后的页码
                console.log(oldpage)   //点击前的页码
                this.getData()
            }
        },
        methods : {
            getData(){
            //保留使用接口获取数据
                this.getList()
            },
            //实现分页功能
            getList(){
                //分页 第一页 1-5 (0-4) 6-10 (5-9)
                // slice()  截取   
                // slice(  (当前页的页码-1)*每一页的数据的数量    ,   当前页的页码*每一页的数据的数量  )  截取   
                //(this.currpage-1)*this.pageSize,this.currpage*this.pageSize       
                this.list2 = this.list.slice((this.currpage-1)*this.pageSize,this.currpage*this.pageSize) 
            }
        }
   };
</script>
<style lang="scss" scoped>

@import "@/Scss/index.scss";
.box{
    height: 92vh;overflow: scroll;
}
.box-1{
    @include FontOnly(2rem);
    @include Pd(1rem 0 0 2rem);

}
.box-3{
    @include Pd(0 2rem 9rem 2rem);
}
.block{
    width: 100%;
    @include Pd(1rem 0);
}
</style>